---
title: Tailwind CSS Textarea Theme - Material Tailwind
description: Learn how to customize the theme and styles for textarea component.
navigation:
  [
    "overview",
    "textarea-theme-object-type",
    "textarea-variant-object-type",
    "textarea-size-object-type",
    "textarea-state-object-type",
    "textarea-theme-customization",
    "examples",
    "props",
  ]
github: theme/textarea
related:
  [
    {
      title: "Examples",
      route: "textarea",
      description: "Checkout different examples for textarea component.",
    },
    {
      title: "Props",
      route: "props/textarea",
      description: "Learn more about props definition and types of textarea component.",
    },
  ]
---

# Tailwind CSS Textarea - Theme

<span id="overview" className="scroll-mt-48" />

Learn how to customize the theme and styles for textarea component, the theme object for textarea component has three main objects:

**A.** The <Code>defaultProps</Code> object for setting up the default value for props of textarea component.<br />
**B.** The <Code>valid</Code> object for customizing the valid values for textarea component props.<br />
**C.** The <Code>styles</Code> object for customizing the theme and styles of textarea component.<br />

You can customize the theme and styles of textarea component by adding Tailwind CSS classes as key paired values for objects.

<br />
<br />

## Textarea Theme Object Type

Variant of <Code>Textarea</Code> component theme has a specific type of <a href="#textarea-variant-object-type" className="font-medium hover:text-blue-500 transition-colors">Textarea Variant Styles Type</a>

<span id="textarea-theme-object-type" className="scroll-mt-48" />

```ts
interface TextareaStylesType {
  defaultProps: {
    variant: string;
    size: string;
    color: string;
    label: string;
    error: boolean;
    success: boolean;
    resize: boolean;
    labelProps: object;
    containerProps: object;
    className: string;
  };
  valid: {
    variants: string[];
    sizes: string[];
    colors: string[];
  };
  styles: {
    base: {
      container: object;
      textarea: object;
      label: object;
    };
    variants: {
      outlined: TextareaVariantStylesType;
      standard: TextareaVariantStylesType;
      static: TextareaVariantStylesType;
    };
  };
}
```

<br />
<br />

### For TypeScript Only

```tsx
import type { TextareaStylesType } from "@material-tailwind/react";
```

---

## Theme Object Type - Textarea Variant

Textarea variant object type contains two specific types of <a href="#textarea-size-object-type" className="font-medium hover:text-blue-500 transition-colors">Textarea Size Styles Type</a> and <a href="#textarea-state-object-type" className="font-medium hover:text-blue-500 transition-colors">Textarea State Styles Type</a>

<span id="textarea-variant-object-type" className="scroll-mt-48" />

```ts
interface TextareaVariantStylesType {
  base?: {
    container: object;
    textarea: object;
    label: object;
  };
  sizes: {
    md: TextareaSizeStylesType;
    lg: TextareaSizeStylesType;
  };
  colors: {
    textarea: object;
    label: object;
  };
  error: TextareaStateStylesType;
  success: TextareaStateStylesType;
  shrink: TextareaStateStylesType;
}
```

<br />
<br />

### For TypeScript Only

```tsx
import type { TextareaVariantStylesType } from "@material-tailwind/react";
```

---

## Theme Object Type - Textarea Size

<span id="textarea-size-object-type" className="scroll-mt-48" />

```ts
interface TextareaSizeStylesType {
  container: object;
  textarea: object;
  label: object;
}
```

<br />
<br />

### For TypeScript Only

```tsx
import type { TextareaSizeStylesType } from "@material-tailwind/react";
```

---

## Theme Object Type - Textarea State

<span id="textarea-state-object-type" className="scroll-mt-48" />

```ts
interface TextareaStateStylesType {
  textarea: object;
  label: object;
}
```

<br />
<br />

### For TypeScript Only

```tsx
import type { TextareaStateStylesType } from "@material-tailwind/react";
```

---

## Textarea Theme Customization

<span id="textarea-theme-customization" className="scroll-mt-48" />

```ts
const theme = {
  textarea: {
    styles: {
      base: {
        container: {
          position: "relative",
          width: "w-full",
          minWidth: "min-w-[200px]",
        },
      },
    },
  },
};
```

<span id="examples" className="scroll-mt-48" />
<span id="props" className="scroll-mt-48" />
